
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"  template="/template/layoutPublico.xhtml">

<ui:define name="content">
<h:body>
	<h:form id="idFormConsola">
		<p:remoteCommand autoRun="true" immediate="true" action="#{registroSolicitudBean.reset}" oncomplete="$('#btnrender').click();"/>
		
		<p:commandButton id="btnrender" rendered="false">
			<p:ajax update="idFormConsola" resetValues="true" />
			<f:ajax render="idFormConsola" />                
		</p:commandButton>
		
        
		<p:growl id="mensajero" globalOnly="false" showDetail="true"  autoUpdate="true" life="4000" /><!-- rendered="#{registroSolicitudBean.verMensaje}"/> -->
			
				
		<p:panel id="basic" style="width:750px;" styleClass="div_formulario">
			<h3  style="text-align:center;"><p:outputLabel value="#{rbSirenasUI['sirenas.ui.form.solicitud.registro.title']}" /></h3>
			<p:separator />
			
			<p:panelGrid id="formSolicitud" layout="grid"  >
				<p:row>
					<p:column colspan="4">
						<p:outputLabel styleClass="label" value="(*) Campo obligatorio "/>
					</p:column>
				</p:row>
				<p:row>
					<p:column colspan="4">
					
						<div id="idFormConsola:terminos_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
							DATOS DE VALIDACION
						</div>
					</p:column>
				</p:row>
				<p:row>
					<p:column >
						<p:outputLabel styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.persona.ruc.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}"  />
					</p:column>
					<p:column id="colRuc" styleClass="celda">
						<p:inputText id="numRuc" maxlength="11"  onkeyup="$(this).val($(this).val().replace(/[^0-9]/g, ''));"  value="#{registroSolicitudBean.registro.numRuc}" required="true"
							requiredMessage="#{rbSirenasUI['sirenas.ui.msj.num_ruc.required']}" >
							<p:ajax event="blur" listener="#{registroSolicitudBean.validaPermisoRegistro()}" update="colAceptar colDoc colRuc numDocumento :permisoRegistroPopup btnAceptar" />	
						</p:inputText>
						
						<p:message for="numRuc" display="icon"/>
						<p:graphicImage id="imgCheck01" url="/recursos/imagenes/check.png" rendered="#{registroSolicitudBean.permisoRegistro}" width="20px" height="20px"/>
						
					</p:column>
					<p:column>						
					</p:column>
				</p:row>

				<p:row>
					<p:column colspan="4">					
					<div id="idFormConsola:terminos_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
						DATOS PERSONALES
					</div>
					</p:column>
				</p:row>
				<p:row>
					<p:column colspan="4">
						<h:outputText  value="#{rbSirenasUI['sirenas.ui.regsolicitud.reglas.documento.label']}" />
					</p:column>
				</p:row>
				<p:row>
					<p:column >
						<h:outputText styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.persona.tipodocumento.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}" />
					</p:column>
					<p:column  >						
						 <p:selectOneMenu id="tipoDoc" value="#{registroSolicitudBean.registro.indTipoDocumento}"  required="true" requiredMessage="#{rbSirenasUI['sirenas.ui.msj.tipo_documento.required']}" 
						 	valueChangeListener="#{registroSolicitudBean.cambioTipoDocumento}"  style="width:180px">
						      <f:selectItems value="#{repositorioDatos.listaTipoDocumentoIdentidad}"/>
							<p:ajax process="tipoDoc" partialSubmit="true" event="valueChange"  update="colAceptar numRuc numDocumento :permisoRegistroPopup btnAceptar"/>	
							<f:ajax render="formSolicitud" />
        				</p:selectOneMenu>
						<p:message for="tipoDoc" display="icon"/>
					</p:column>
					
					<p:column >
						<h:outputText styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.persona.numdocumento.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}" />
					</p:column>
					<p:column id="colDoc" styleClass="celda">
						<p:inputText id="numDocumento" maxlength="#{registroSolicitudBean.maxDocumento}"  onkeyup="$(this).val($(this).val().replace(/[^0-9]/g, ''));"  
							value="#{registroSolicitudBean.registro.numDocumento}" required="true"
							requiredMessage="#{rbSirenasUI['sirenas.ui.msj.num_documento.required']}" disabled="#{empty registroSolicitudBean.registro.indTipoDocumento}">
							<p:ajax event="blur" listener="#{registroSolicitudBean.validaPermisoRegistro()}"  update="colAceptar colDoc colRuc numRuc :permisoRegistroPopup btnAceptar" />	
						</p:inputText>
						<p:message for="numDocumento" display="icon"/>
						<p:graphicImage id="imgCheck02"  url="/recursos/imagenes/check.png" rendered="#{registroSolicitudBean.permisoRegistro}" width="20px" height="20px"/>
					</p:column>
				</p:row>

				<p:row>
					<p:column >
						<h:outputText styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.persona.apepaterno.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}" />
					</p:column>
					<p:column styleClass="celda">
						<p:inputText id="apePaterno" value="#{registroSolicitudBean.registro.apePaterno}"  
							required="true"
							onkeyup="$(this).val($(this).val().replace(/[^a-zA-Z\säüöáéíóúÁÉÍÓÚüÜñÑ]/g, ''));"
							requiredMessage="#{rbSirenasUI['sirenas.ui.msj.ape_paterno.required']}" />
						<p:message for="apePaterno" display="icon"/>
					</p:column>
					<p:column >
						<h:outputText styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.persona.apematerno.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}" />
					</p:column>
					<p:column styleClass="celda">
						<p:inputText id="apeMaterno" value="#{registroSolicitudBean.registro.apeMaterno}"  required="true"
							onkeyup="$(this).val($(this).val().replace(/[^a-zA-Z\säüöáéíóúÁÉÍÓÚüÜñÑ]/g, ''));"
							requiredMessage="#{rbSirenasUI['sirenas.ui.msj.ape_materno.required']}" />
						<p:message for="apeMaterno" display="icon"/>
					</p:column>
				</p:row>

				<p:row >
					<p:column >
						<h:outputText styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.persona.nombres.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}" />
					</p:column>
					<p:column colspan="3"  >
						<p:inputText id="nombres" value="#{registroSolicitudBean.registro.nombres}"  size="71"   required="true" 
						onkeyup="$(this).val($(this).val().replace(/[^a-zA-Z\säüöáéíóúÁÉÍÓÚüÜñÑ]/g, ''));"
							requiredMessage="#{rbSirenasUI['sirenas.ui.msj.nombres.required']}" /><p:message for="nombres" display="icon" />
					</p:column>
					
				</p:row>

				<p:row>
					<p:column >
						<p:outputLabel styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.persona.genero.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}" />
					</p:column>
					<p:column >		
						 <p:selectOneMenu id="cmbGenero" value="#{registroSolicitudBean.registro.genero}"  required="true"
							requiredMessage="#{rbSirenasUI['sirenas.ui.msj.genero.required']}" style="width:180px">
						           <f:selectItems value="#{repositorioDatos.listaGenero}"/>
        				</p:selectOneMenu>
						<p:message for="cmbGenero" display="icon"/>
					</p:column>
					<p:column >
						<p:outputLabel styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.persona.fecnacimiento.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}" />
					</p:column>
					<p:column styleClass="celda">
						<p:calendar id="fecNacimiento" value="#{registroSolicitudBean.registro.fecNacimiento}" 
							navigator="true" pattern="dd/MM/yyyy" maxdate="#{repositorioDatos.maxDate}" yearRange="c-71:c-18"  required="true"
							requiredMessage="#{rbSirenasUI['sirenas.ui.msj.nacimiento.required']}"/>
						<p:message for="fecNacimiento" display="icon"/>
					</p:column>
					
				</p:row>
				<p:row>
					<p:column >
						<p:outputLabel styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.comunicacion.correo.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}" />
					</p:column>
					<p:column styleClass="celda">
						<p:inputText id="correoElectronico" value="#{registroSolicitudBean.registro.correoElectronico}"  required="true"
							requiredMessage="#{rbSirenasUI['sirenas.ui.msj.correo.required']}"
							validatorMessage="#{rbSirenasUI['sirenas.ui.msj.correo.validator']}" style="text-transform: none;">
							<f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" /> 	
						</p:inputText>
						<p:message for="correoElectronico" display="icon"/>
					</p:column>
					<p:column >
						<p:outputLabel styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.comunicacion.telefono.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}" />
					</p:column>
					<p:column styleClass="celda">
						<p:inputText id="telefono"   value="#{registroSolicitudBean.registro.telefono}" required="true"
							onkeyup="$(this).val($(this).val().replace(/[^0-9#*()]/g, ''));" requiredMessage="#{rbSirenasUI['sirenas.ui.msj.telefono.required']}" validatorMessage="#{rbSirenasUI['sirenas.ui.msj.telefono.required']}">
							<f:validateLength minimum="5" />
						</p:inputText>
						<p:message for="telefono" display="icon"/>
					</p:column>
				</p:row>
				
				<p:row>
					<p:column colspan="2" style="text-align:left">
						<p:selectBooleanCheckbox value="#{registroSolicitudBean.registro.correoElectronicoIndicador}" />
						<p:spacer width="10"/>
						<p:outputLabel value="#{rbSirenasUI['sirenas.ui.entidad.comunicacion.espublico_correo.label']}" />
					</p:column>
					<p:column colspan="2" style="text-align:left">
						<p:selectBooleanCheckbox value="#{registroSolicitudBean.registro.telefonoIndicador}" />
						<p:spacer width="10"/>
						<p:outputLabel value="#{rbSirenasUI['sirenas.ui.entidad.comunicacion.espublico_telefono.label']}"/>
					</p:column>
				</p:row>
				
				<p:row>
					<p:column colspan="4">					
					<div id="idFormConsola:terminos_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
						DATOS DE DOMICILIO
					</div>
					</p:column>
				</p:row>
				
				<p:row>
					<p:column colspan="4">
						<h:outputText styleClass="label" value="#{rbSirenasUI['sirenas.ui.regsolicitud.reglas.domicilio.label']}" />
					</p:column>
				</p:row>
				<p:row>
					<p:column>
						<h:outputText styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.domicilio.via.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}" />
					</p:column>
					<p:column colspan="3">
						<p:selectOneMenu  id="cmbVia" value="#{registroSolicitudBean.registro.idTipoVia}" required="true"
							requiredMessage="#{rbSirenasUI['sirenas.ui.msj.via.required']}" style="width:450px;">
							<f:selectItems value="#{repositorioDatos.listaVias}" />				           
        				</p:selectOneMenu>											
						<p:message for="cmbVia" display="icon"/>
					</p:column>
				</p:row>
				<p:row>
					<p:column>
						<h:outputText styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.domicilio.direccion.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}" />
					</p:column>
					<p:column colspan="3" >
						<p:inputText size="71" id="direccion" value="#{registroSolicitudBean.registro.direccion}"  required="true"
							requiredMessage="#{rbSirenasUI['sirenas.ui.msj.direccion.required']}"/>					
						<p:message for="direccion" display="icon"/>
					</p:column>
				</p:row>
				<p:row>
					<p:column>
						<h:outputText styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.domicilio.zona.label']}" />
					</p:column>
					<p:column colspan="3">
						<p:selectOneMenu  id="cmbZona" value="#{registroSolicitudBean.registro.idTipoZona}" 
							style="width:450px;"
							valueChangeListener="#{registroSolicitudBean.requiereDescZona}" >
							<f:selectItems value="#{repositorioDatos.listaZonas}" />	
							<p:ajax process="cmbZona" partialSubmit="true" event="valueChange" update="urbanizacion sas" />
							<f:ajax render="urbanizacion" />
        				</p:selectOneMenu>							
					</p:column>
					
				</p:row>
				
					<p:row>
					<p:column >
						<h:outputText styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.domicilio.urbanizacion.label']}" />
					</p:column>
					<p:column colspan="3">
						<p:inputText size="71" id="urbanizacion" value="#{registroSolicitudBean.registro.urbanizacion}"  
							required="#{registroSolicitudBean.registro.requiereZona}"
							requiredMessage="#{rbSirenasUI['sirenas.ui.msj.zona.required']}"
							disabled="#{not registroSolicitudBean.registro.requiereZona}"/>				
						<p:message for="cmbZona" display="icon"/>
						<p:outputLabel id="sas" value="#{registroSolicitudBean.registro.requiereZona}"/>
					</p:column>
				</p:row>
				<p:row>
					<p:column >
						<h:outputText styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.domicilio.referencia.label']}" />
					</p:column>
					<p:column colspan="3">
						<p:inputText size="71" id="referencias" value="#{registroSolicitudBean.registro.referencias}" />
					</p:column>
				</p:row>
				<p:row>
					<p:column >
						<p:outputLabel styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.domicilio.region.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}"/>
					</p:column>
					<p:column  >
						<p:selectOneMenu  id="cmbRegion" value="#{registroSolicitudBean.registro.idRegion}" valueChangeListener="#{navegadorBean.cargarListaProvincia}" required="true"
							requiredMessage="#{rbSirenasUI['sirenas.ui.msj.region.required']}" style="width:180px;">
							<f:selectItems value="#{repositorioDatos.listaRegion}" />			
							<p:ajax process="cmbRegion" partialSubmit="true" event="valueChange"  update="cmbProvincia,cmbDistrito"/>		           
        				</p:selectOneMenu>											
						<p:message for="cmbRegion" display="icon"/>
						
					</p:column>
					<p:column >
						<p:outputLabel styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.domicilio.provincia.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}"/>
					</p:column>
					<p:column >
						 <p:selectOneMenu id="cmbProvincia" value="#{registroSolicitudBean.registro.idProvincia}" valueChangeListener="#{navegadorBean.cargarListaDistrito}"  required="true"
							requiredMessage="#{rbSirenasUI['sirenas.ui.msj.provincia.required']}" style="width:180px;">
	 						<f:selectItems value="#{repositorioDatos.listaProvincia}"/>
							<p:ajax process="cmbProvincia" partialSubmit="true" event="valueChange"  update="cmbDistrito"/>
        				</p:selectOneMenu>
						<p:message for="cmbProvincia" display="icon"/>
					</p:column>
				</p:row>				
				<p:row>
					<p:column >
						<p:outputLabel styleClass="label" value="#{rbSirenasUI['sirenas.ui.entidad.domicilio.distrito.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}"/>
					</p:column>
					<p:column >						
						 <p:selectOneMenu id="cmbDistrito" value="#{registroSolicitudBean.registro.idDistrito}"  required="true"
							requiredMessage="#{rbSirenasUI['sirenas.ui.msj.distrito.required']}" style="width:180px;">
						           <f:selectItems value="#{repositorioDatos.listaDistrito}"/>
        				</p:selectOneMenu>
						<p:message for="cmbDistrito" display="icon"/>
						
					</p:column>
				</p:row>
				
				
				<p:row>
					<p:column colspan="4">
						<p:panel id="terminos" header="#{rbSirenasUI['sirenas.ui.regsolicitud.terminos.titulo.label']}" style="width:710px;">
							<p:panelGrid columns="1">
								<f:facet name="" ></f:facet>
								<h:outputText value="#{rbSirenasUI['sirenas.ui.regsolicitud.terminos.parrafo01.label']}" />
								<h:outputText value="#{rbSirenasUI['sirenas.ui.regsolicitud.terminos.parrafo02.label']}" />
								<h:outputText value="#{rbSirenasUI['sirenas.ui.regsolicitud.terminos.parrafo03.label']}" />
								<h:outputText value="#{rbSirenasUI['sirenas.ui.regsolicitud.terminos.parrafo04.label']}" />
								<p:separator />
								<p:row  styleClass="celda">
        							<p:selectBooleanCheckbox id="condiciones" value="#{registroSolicitudBean.aceptoCondiciones}" required="true"
										requiredMessage="#{rbSirenasUI['sirenas.ui.msj.condiciones.required']}"/>
        							<p:spacer width="10" />
									<h:outputText value="#{rbSirenasUI['sirenas.ui.regsolicitud.terminos.acepto.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}" />
									<p:message for="condiciones"/>
								</p:row>
							</p:panelGrid>
					    </p:panel>
					</p:column>
				</p:row>
				
				<p:row>
					<p:column colspan="4" style="text-align:center ">
						<p:graphicImage id="imgCaptcha" value="/Simple.jpg" />
                        <p:commandButton id="refreshCaptcha" icon="ui-icon-refresh" update="imgCaptcha txtCaptcha" ajax="false"/>
					</p:column>
				</p:row>		
				<p:row>
					<p:column  colspan="4" style="text-align:center;">
						<p:outputLabel style="font-weight: bold;" value="#{rbSirenasUI['sirenas.ui.entidad.domicilio.captcha.label']} #{rbSirenasUI['sirenas.ui.obligatorio']}"/>
					</p:column>
					</p:row>
				<p:row>
					<p:column colspan="4" style="text-align:center; ">
			            <p:inputText id="txtCaptcha"  required="true" requiredMessage="Ingrese el Código Captcha"  style="text-transform: none;"
			                         validator="#{captchaBean.validateCaptcha}" validatorMessage="El texto Captcha no es el Correcto" />
						<p:message for="txtCaptcha"/>
					</p:column>
				</p:row>
				
				
				<p:row>
					<p:column id="colAceptar" style="text-align:center "  colspan="4">
							
						<p:commandButton id="btnAceptar" value="ACEPTAR" action="#{registroSolicitudBean.registrarSolicitud}" ajax="false" icon="ui-icon-check" validateClient="true" 
							disabled="#{!registroSolicitudBean.permisoRegistro}" update="idFormConsola">
							<f:ajax render="@form" />
						</p:commandButton>
						 			
						<p:confirmDialog global="true" showEffect="fade" hideEffect="explode" style="text-align:center">
						    <p:commandButton value="#{rbSirenasUI['sirenas.ui.mensajes.confirmacion.no']}" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
						    <p:commandButton value="#{rbSirenasUI['sirenas.ui.mensajes.confirmacion.si']}" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
						</p:confirmDialog>
						
						<p:blockUI block="idFormConsola" widgetVar="bui">
				        	PROCESANDO<br />
				        	<p:graphicImage url="/recursos/imagenes/ajaxloadingbar.gif"/>
						</p:blockUI>
					</p:column>
				</p:row>

			</p:panelGrid>
		</p:panel>

		</h:form>
		
		<p:dialog id="permisoRegistroPopup" widgetVar="permisoRegistroPopup" header="VALIDACION PERMISO REGISTRO" closable="true" 
			dynamic="true" width="400px" height="100px" modal="true" appendTo="@(body)" showEffect="puff" hideEffect="explode">

				<p:graphicImage url="/recursos/imagenes/warning.png" width="50px" height="50px"/>
				<p:spacer width="20" />
				<p:row>
					<p:column >
						<p:outputLabel value="#{rbSirenasUI['sirenas.ui.msj.permiso.existe.persona']}" rendered="#{registroSolicitudBean.existePersona}"/>
						<br/>
						<p:outputLabel value="#{rbSirenasUI['sirenas.ui.msj.permiso.existe.solicitud']}" rendered="#{registroSolicitudBean.existeSolicitud}"/>
					</p:column>
				</p:row>
		</p:dialog>
	</h:body>
		
	</ui:define>
</ui:composition>